<template>
<div id="add">
    <van-nav-bar
  title="我是前辈"
  left-arrow
  @click-left="onClickLeft"
/>

<van-form @submit="onSubmit">
  <van-field
    v-model="name"
    name="真实姓名"
    label="真实姓名"
    placeholder="真实姓名"
    :rules="[{ required: true, message: '请填写真实姓名' }]"
  />
  <van-field
    v-model="age"
    type="number"
    name="年龄"
    label="年龄"
    placeholder="年龄"
    :rules="[{ required: true, message: '请填写年龄' }]"
  />
  <van-field
  v-model="college"
    name="毕业院校"
    label="毕业院校"
    placeholder="请填写毕业院校"
    :rules="[{ required: true, message: '请填写毕业院校' }]"
  />
  <van-field
    readonly
    clickable
    name="picker"
    :value="type.text"
    label="分类"
    placeholder="点击选择分类"
    @click="showPicker = true"
  />
  <van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup>
  <van-field
    readonly
    clickable
    name="calendar"
    :value="birthday"
    label="生日"
    placeholder="点击选择生日"
    @click="showCalendar = true"
  />
    <van-calendar v-model="showCalendar" @confirm="onConfirmBirth" />    
    <van-field name="uploader" label="文件上传">
    <template #input>
        <van-uploader v-model="uploader" :after-read="uploadImg" />
    </template>
    </van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>

</div>
</template>

<script>
import axios from 'axios';
import {Toast} from 'vant';
export default {
      data() {
    return {
      name: '',
      age: '',
      college:'',
      type: '',
      birthday:"",
      icon:"",
      uploader: [],
      columns: [
          {id:1,text:"考研"},
          {id:2,text:"考公"},
          {id:3,text:"实习"},
      ],
      showPicker: false,
       showCalendar: false,
    };
},
methods:{
    uploadImg(file){
     let formData=new FormData();
     formData.append("image",file.file);

     let config={
       headers:{
        "Content-Type":"multipart/form-data",
       },
     };
        axios
        .post("/api/upload/upload.html",formData,config)
        .then((res)=>{
          console.log(res);
          this.icon=res.data
        })
        .catch(err=>{
          console.log(err)
        })
        },
    onConfirmBirth(date) {
      this.birthday = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      this.showCalendar = false;
    },
    onConfirm(value) {
      this.type = value;
      this.showPicker = false;
    },
    onSubmit(values) {
      console.log('submit', values);
      axios
      .post("/api/user/doadd",{
        name:this.name,
        age:this.age,
        type:this.type.id,
        birthday:this.birthday,
        icon:this.icon
      })
      .then((res)=>{
        var data = res.data;
        var json = eval("(" + data + ")");
        console.log(json.code)
        if(json.code==200){
          Toast.success('添加成功');
          location.reload()
        }else{
          Toast.fail('失败');
        }
      })
    },
    onClickLeft(){
        this.$router.go(-1);
    }
}
}
</script>

<style lang="scss" scoped>
>>> .van-nav-bar{
    background: lightpink;
    color: white;
    .van-icon,
    van-nav-bar__title{
        color: white;
    }
}
</style>